<template>
  <div class='box'>
    <div class='ul'>
      <div class='ul_text' :class="{'ul_Bg':isShow === 1}" @click='isShow = 1'>表格滚动</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 2}" @click='isShow = 2'>虚拟列表</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 3}" @click='isShow = 3'>3d地图</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 4}" @click='isShow = 4'>灰度展示</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 5}" @click='isShow = 5'>MxDraw+mapbox-gl研究</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 6}" @click='isShow = 6'>MxDraw研究</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 7}" @click='isShow = 7'>fontFace引用</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 8}" @click='isShow = 8'>文件预览</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 9}" @click='isShow = 9'>CSS开发技巧</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 10}" @click='isShow = 10'>3D卡片水平旋转效果</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 11}" @click='isShow = 11'>无缝滚动列表</div>
      <div class='ul_text' :class="{'ul_Bg':isShow === 12}" @click='isShow = 12'>DXF 渲染</div>
    </div>
    <div class='li'>
      <tableScroll v-if='isShow === 1' />
      <list v-if='isShow === 2' />
      <threeMap v-if='isShow === 3' />
      <filterBox v-if='isShow === 4' />
      <mxDraw v-if='isShow === 5' />
      <mxDrawOne v-if='isShow === 6' />
      <fontFace v-if='isShow === 7' />
      <filePreview v-if='isShow === 8' />
      <cssDevelop v-if='isShow === 9' />
      <css3d v-if='isShow === 10' />
      <seamlessScroll v-if='isShow === 11' />
      <myDxf v-if='isShow === 12' />
    </div>
  </div>
</template>

<script setup lang="ts">
  import tableScroll from './components/tableScroll.vue';
  import list from './components/list.vue';
  import threeMap from "./mapEcharts/3dMap.vue";
  import filterBox from "./components/filterBox.vue";
  import mxDraw from "./mxDraw/mxDraw.vue";
  import mxDrawOne from "./mxDraw/mxDraw1.vue";
  import fontFace from "./components/fontFace.vue";
  import filePreview from "./components/filePreview.vue";
  import cssDevelop from "./components/cssDevelop.vue";
  import seamlessScroll from "./components/seamlessScroll.vue";
  import myDxf from "./myDxf/index.vue"
  import { onMounted, ref } from 'vue'
  let isShow = ref(1);
</script>
